<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript" src="../internal.js"></script>
        <style type="text/css">
            .warp {
                width: 362px;
                height: 225px;
                padding: 20px 0 0 20px;
                position: relative;
            }

            /*#url { margin-bottom: 2px; }*/
            .format span {
                display: inline-block;
                text-align: center;
                zoom: 1;
                width: 45px;
            }

            input {
                border-radius: 5px;
                outline: none;
                border: 1px solid #ccc;
                margin-right: 8px;
            }

            table td {
                display: flex;
                height: 30px;
                line-height: 30px;
                padding-bottom: 20px;
            }

            table tr:last-child td {
                padding-bottom: 10px;
            }

            #align {
                width: 79px;
                height: 29px;
                line-height: 29px;
                margin-top: 2px;
                border-radius: 5px;
                border: 1px solid #ccc;
            }

            .scroll {
                display: flex;
            }

            .scroll input {
                margin-top: 9px;
                margin-right: 32px;
            }

            .scroll td {
                padding-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="warp">
            <table width="300" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2" class="format">
                        <span><var id="lang_input_address"></var></span>
                        <input style="width:294px;height:30px;" id="url" type="text" value=""/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="format"><span><var id="lang_input_width"></var></span><input
                            style="width:294px;height:30px;" type="text" id="width"/> px
                    </td>

                </tr>
                <tr>
                    <td colspan="2" class="format"><span><var id="lang_input_height"></var></span><input
                            style="width:294px;height:30px;" type="text" id="height"/> px
                    </td>
                </tr>
                <tr class="scroll">
                    <td><span><var id="lang_input_isScroll"></var></span><input type="checkbox" id="scroll"/></td>
                    <td><span><var id="lang_input_frameborder"></var></span><input type="checkbox" id="frameborder"/>
                    </td>
                </tr>

                <tr>
                    <td colspan="2"><span><var id="lang_input_alignMode"></var></span>
                        <select id="align">
                            <option value=""></option>
                            <option value="left"></option>
                            <option value="right"></option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
            var iframe = editor._iframe;
            if (iframe) {
                $G("url").value = iframe.getAttribute("src") || "";
                $G("width").value = iframe.getAttribute("width") || iframe.style.width.replace("px", "") || "";
                $G("height").value = iframe.getAttribute("height") || iframe.style.height.replace("px", "") || "";
                $G("scroll").checked = (iframe.getAttribute("scrolling") == "yes") ? true : false;
                $G("frameborder").checked = (iframe.getAttribute("frameborder") == "1") ? true : false;
                $G("align").value = iframe.align ? iframe.align : "";
            }

            function queding() {
                var url = $G("url").value.replace(/^\s*|\s*$/ig, ""),
                    width = $G("width").value,
                    height = $G("height").value,
                    scroll = $G("scroll"),
                    frameborder = $G("frameborder"),
                    float = $G("align").value,
                    newIframe = editor.document.createElement("iframe"),
                    div;
                if (!url) {
                    alert(lang.enterAddress);
                    return false;
                }
                newIframe.setAttribute("src", /http:\/\/|https:\/\//ig.test(url) ? url : "http://" + url);
                /^[1-9]+[.]?\d*$/g.test(width) ? newIframe.setAttribute("width", width) : "";
                /^[1-9]+[.]?\d*$/g.test(height) ? newIframe.setAttribute("height", height) : "";
                scroll.checked ? newIframe.setAttribute("scrolling", "yes") : newIframe.setAttribute("scrolling", "no");
                frameborder.checked ? newIframe.setAttribute("frameborder", "1", 0) : newIframe.setAttribute("frameborder", "0", 0);
                float ? newIframe.setAttribute("align", float) : newIframe.setAttribute("align", "");
                if (iframe) {
                    iframe.parentNode.insertBefore(newIframe, iframe);
                    domUtils.remove(iframe);
                } else {
                    div = editor.document.createElement("div");
                    div.appendChild(newIframe);
                    editor.execCommand("inserthtml", div.innerHTML);
                }
                editor._iframe = null;
                dialog.close();
            }

            dialog.onok = queding;
            $G("url").onkeydown = function (evt) {
                evt = evt || event;
                if (evt.keyCode == 13) {
                    queding();
                }
            };
            $focus($G("url"));

        </script>
    </body>
</html>